<template>
  <div
    class="d-flex-c full-box"
    v-loading="loading"
  >
    <div class="flex-0 switch-button-tab-bg flex-between">
      <SwitchTab
        is-button
        button-type="long"
        :tab-list="waterLevelTabList"
        v-model="waterLevelTab"
      />
      <div class="flex-ai-c">
        <!-- <span class="c-text-blue f-12 m-r-mini">今日以来</span> -->
        <BKSelect
          v-model="curStation"
          :clearable="false"
          size="mini"
          class="blue-select"
          popper-class="blue-select-dropdown"
          :mock="selectStationList"
        />
      </div>
    </div>
    <div class="flex-1">
      <BKChart
        :option="waterLevelOptions"
        class="full-box"
      />
    </div>
    <div class="flex-0 flex-ai-c">
      <div
        class="left-button button-shadow"
        @click="troggleScroll('left')"
      >
        <i
          class="el-icon-arrow-left c-pointer"
        />
      </div>
      <div
        class="flex-ai-c station-select-box flex-1"
        ref="scrollContent"
      >
        <div
          v-for="(item,index) in commonlyUsedStation"
          class="station-select-item flex-ai-c jc-c"
          :class="{'is-active':curStation === item.value}"
          :key="index"
          @click="curStation = item.value"
        >
          <span class="f-14 full-width t-nowrap">{{ item.label }}</span>
        </div>
      </div>
      <div
        class="right-button button-shadow"
        @click="troggleScroll('right')"
      >
        <i
          class="el-icon-arrow-right c-pointer"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SwitchTab from '@/views/business/ysqjcdp/components/switch-tab.vue'
import { getBarOption, getGradientColor } from '@/components/chart/echart-utils'

export default {
  name: 'WaterLevelChart',
  components: { SwitchTab },
  data () {
    this.waterLevelTabList = [{
      label: '河道站水位变化',
      value: 'hd'
    },
    {
      label: '水库站水位变化',
      value: 'RR'
    }]
    this.typeKeyMap = {
      hd: {
        sttpKeys: ['ZZ', 'ZQ'],
        labelField: 'stnam',
        staticStcd: '30101400'
      },
      RR: {
        sttpKeys: ['RR'],
        labelField: 'stnm',
        staticStcd: '30201101'
      }
    }
    this.hdChartConfig = {
      series: [
        {
          name: '历史最高水位',
          field: 'obhtz',
          isMarkLine: true,
          color: '#FF800F',
          yAxisIndex: 0
        },
        {
          name: '保证水位',
          field: 'grz',
          isMarkLine: true,
          color: '#F5FF5A',
          yAxisIndex: 0
        },
        {
          name: '警戒水位',
          field: 'wrz',
          isMarkLine: true,
          color: '#FF5A69',
          yAxisIndex: 0
        },
        {
          name: '流量',
          field: 'q',
          color: '#1E98FF',
          yAxisIndex: 1
        },
        {
          name: '水位',
          field: 'z',
          color: '#00C45C',
          yAxisIndex: 0
        }
      ]
    }
    this.skChartConfig = {
      series: [
        {
          name: '历史最高水位',
          field: 'hhrz',
          isMarkLine: true,
          color: '#FF800F',
          yAxisIndex: 0
        },
        {
          name: '汛限水位',
          field: 'fsltdz',
          isMarkLine: true,
          color: '#F5FF5A',
          yAxisIndex: 0
        },
        {
          name: '流量',
          field: 'inq',
          color: '#1E98FF',
          yAxisIndex: 1
        },
        {
          name: '水位',
          field: 'rz',
          color: '#00C45C',
          yAxisIndex: 0
        }
      ]
    }
    return {
      waterLevelTab: 'hd',
      waterLevelOptions: null,
      allSelectData: [],
      commonlyUsedStation: [],
      selectStationList: [],
      curStation: '',
      // curComoonUsedStation:'',
      dataCurve: [],
      cordonData: {},
      loading: false

    }
  },
  watch: {
    curStation: {
      // immediate: true,
      handler (val) {
        this.fetchChartData()
      }
    },
    waterLevelTab: {
      immediate: true,
      handler () {
        this.changeSelectData()
      }
    }
  },
  methods: {
    troggleScroll (type) {
      // console.log({ type }, this.$refs.scrollContent, this.$refs.scrollContent.scrollLeft)
      const step = 80
      this.$nextTick(() => {
        type === 'left' ? this.$refs.scrollContent.scrollLeft -= step : this.$refs.scrollContent.scrollLeft += step
      })
    },
    async changeSelectData () {
      const selectData = this.waterLevelTab === 'hd'
        ? await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectFollowStions')
        : await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectReservoirFollowStions')
      const keyMap = this.typeKeyMap[this.waterLevelTab]
      this.selectStationList = selectData.filter(station => {
        return keyMap.sttpKeys.includes(station.sttp)
      }).map(item => {
        return {
          sttp: item.sttp,
          label: item[keyMap.labelField],
          value: item.stcd
        }
      })
      let hasDataObj = {}
      for (var i = 0; i < this.selectStationList.length; i++) {
        const objData = this.selectStationList[i]
        if (objData.value === keyMap.staticStcd) {
          this.selectStationList.splice(i, 1) // 如果数据组存在该元素，则把该元素删除
          hasDataObj = objData
          break
        }
      }
      this.selectStationList.unshift(hasDataObj)
      this.commonlyUsedStation = this.selectStationList // 实际上是不同的，先写死
      this.curStation = this.selectStationList[0] ? this.selectStationList[0].value : ''
    },
    async fetchChartData () {
      this.loading = true
      if (!this.curStation) {
        this.loading = false
        return
      }
      // const btime = this.$utils.createDate().format('YYYY-MM-DD')
      const etime = this.$utils.createDate().format('YYYY-MM-DD HH:mm:ss')
      const chartsData = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectRiverDataCurve', {
        stcd: this.curStation,
        btime: '2024-04-16' + ' 08:00:00',
        // btime: btime + ' 08:00:00',
        etime: etime
      }, false)
      const { dataCurve, ...other } = chartsData
      this.cordonData = { ...other }
      this.dataCurve = dataCurve.map(item => {
        return {
          ...item,
          hour: this.$utils.createDate(item.tm).format('MM-DD')
        }
      })
      this.setChartOption()
      this.loading = false
    },
    setChartOption () {
      const chartConfig = this.waterLevelTab === 'hd' ? this.hdChartConfig : this.skChartConfig
      const result = getBarOption({
        yAxisName: '水位(m)',
        xAxis: this.dataCurve.map(r => r.hour),
        isArea: true,
        hasLegend: true,
        series: chartConfig.series.map(item => {
          return {
            name: item.name,
            type: 'line',
            color: item.color,
            data: item.isMarkLine ? this.dataCurve.map(() => this.cordonData[item.field]) : this.dataCurve.map(data => data[item.field])
          }
        })
      })
      if (!this.dataCurve.length) {
        result.grid.left = 40
        result.grid.right = 40
      } else {
        result.grid.right = 10
      }
      // result.grid.left = 40
      result.grid.bottom = 20
      result.grid.top = 50
      result.xAxis.axisLabel.color = '#FFFFFF'
      result.xAxis = {
        ...result.xAxis,
        // name: '时间',
        boundaryGap: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(233,237,240,0.1)'
          }
        },
        nameTextStyle: {
          color: '#FFFFFF',
          fontSize: '12px',
          padding: [22, 0, 0, -20],
          verticalAlign: 'top'
        }
      }
      result.yAxis.axisLabel.color = '#FFFFFF'
      result.yAxis.splitLine.show = false
      result.yAxis.axisLine = {
        show: true,
        lineStyle: {
          color: 'rgba(233,237,240,0.1)'
        }
      }
      result.yAxis.nameTextStyle = {
        color: '#FFFFFF',
        fontSize: '12px',
        padding: [0, 0, 0, -20]
      }
      result.yAxis = [
        {
          ...result.yAxis
        },
        {
          ...result.yAxis,
          name: '流量(m³/s)'
        }
      ]
      result.series = result.series.map((item, index) => {
        const config = chartConfig.series[index]
        return {
          ...item,
          smooth: true,
          symbol: 'none',
          yAxisIndex: config.yAxisIndex,
          lineStyle: {
            type: config.isMarkLine ? 'dashed' : 'solid',
            shadowBlur: config.isMarkLine ? 0 : 12,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            width: 2,
            shadowColor: item.color + '99'
          },
          areaStyle: {
            color: (!config.isMarkLine && item.color) ? getGradientColor(item.color + '99', '#044ea600') : 'transparent'
          }
        }
      })
      result.legend = {
        ...result.legend,
        itemWidth: 16,
        itemHeight: 1,
        textStyle: {
          color: '#fff'
        }
      }
      result.tooltip.appendToBody = true
      // console.log({ waterLevelOptions: result })
      this.waterLevelOptions = result
    }
  }
}
</script>

<style lang="scss" scoped>
.switch-button-tab-bg {
  margin-bottom: 15px;
}

.station-select-box {
  gap: 8px;
  overflow-x: scroll;
  margin: 0 7px;
  // overflow-y: hidden;
  &::-webkit-scrollbar {
    // 隐藏滚动条
    display: none;
  }

  .station-select-item {
    width: fit-content;
    height: 24px;
    padding: 4px 9px;
    background: rgba(11, 43, 132, 0);
    border: 1px solid #1168b9;
    box-shadow: inset 0 0 10px #1168b9;
    border-radius: 4px;
    cursor: pointer;

    &.is-active,
    &:hover {
      background: rgba(14, 41, 117, 0);
      border: 1px solid #06b5c5;
      box-shadow: inset 0 0 7px #06b5c5;
      color: #00f6ff;
    }
  }
}

.button-shadow {
  cursor: pointer;
  width: 24px;
  height: 24px;
  color: #74a5ff;
  background: rgba(11, 43, 132, 0);
  border: 1px solid #1168b9;
  box-shadow: inset 0 0 7px #1168b9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: rgba(14, 41, 117, 0);
    border: 1px solid #06b5c5;
    box-shadow: inset 0 0 7px #06b5c5;
    color: #00f6ff;
  }
}
</style>
